<template>
  <div class="top" style="display: flex;align-items: center;">
    <p class="left" style="width: 8px;height: 25px;background-color: #f6d39c;margin-right: 10px;border-radius: 3px;"></p>
    <p style="color: white;font-size: 22px;font-weight: 600;">{{ $t('账户取款') }} </p>
  </div>
  <div class="main" style="width:100%;margin-top:50px;text-align:center">
    <p style="color:white;">{{ $t('可用余额') }}  $0</p>
    <p style="color:white;margin-top:20px">{{ $t('货币波动以实际到账为准，便捷，安全，快速') }} </p>
  </div>
  <el-form style="margin-top:30px;margin-left:50px">
    <el-form-item><span style="color:white;width:200px;text-align:right">{{ $t('出金方式') }} ：</span>
      <el-select v-model="form.wallet_id" :placeholder="$t('请选择')"
        style="width: 700px;height: 30px; background-color: black; color: white; border: none;">
        <el-option v-for="option in selectOptions" :key="option.value" :label="option.address_str" :value="option.id" />
      </el-select>
    </el-form-item>

    <el-form-item style="margin-top:30px"><span style="color:white;width:200px;text-align:right;">{{ $t('取款金额') }}：</span>
      <el-input style="width:700px" :placeholder="$t('取款金额')" v-model="form.price"></el-input><span
        style="color:white;margin-left:10px">
        {{ $t('美元') }}</span>
    </el-form-item>
    <el-form-item style="width: 900px; margin-top:30px;">
      <span style="color:white;width:200px;text-align:right;"> {{ $t('实际到账金额') }}：</span>
      <p style="color:white;">{{form.price-(form.price * setting)  }} {{ selectedWalletLabel }}</p>
      <div style="display: flex;margin-left: 450px;">
        <span style="color:white;">{{ $t('手续费') }}：</span>
        <p style="color: white;">{{ setting * 100 }} %</p>
      </div>

    </el-form-item>
    <el-form-item style="margin-top:25px">
      <span style="color:white;width:200px;text-align:right;"></span>
      <p @click="withdrawal"
        style="width:150px;background-color:#f6d39c;border-radius:7px;cursor: pointer;display:flex;justify-content:center;align-items:center">
        <el-icon style="margin-right:6px">
          <Bottom />
        </el-icon>
        <span style="">{{ $t('出金') }} </span>
      </p>
    </el-form-item>
  </el-form>
</template>
  
<script>
import { HomeFilled, Promotion, Pointer, Edit, Bottom } from "@element-plus/icons-vue";
import { withdrawalApi, getWalletApi, settingApi,BankListApi } from '../../api/index'

export default {
  name: '',
  data() {
    return {
      form: {
        wallet_id: '', // 用于存储选中的值
        price: ''
      },
      setting: '',
      walletLabels: {},
      selectOptions: [], // 用于存储从后端请求的选项数据
    };
  },

  computed: {
    selectedWalletLabel() {
      return this.walletLabels[this.form.wallet_id] || '';
    },
    calculatedAmount() {
      return this.form.price * this.setting;
    }
  },

  methods: {
    /* 获取钱包 */
    getWallet() {
      const token = localStorage.getItem('token')
      const params = {
        type: '0',
        token:token
      }
      BankListApi(params).then(res => {
        this.selectOptions = res.data;
        // 将钱包类型与 label 存储到对象中
        this.walletLabels = this.selectOptions.reduce((acc, option) => {
          acc[option.id] = option.main;
          return acc;
        }, {});
      })
    },
    /* 提现 取款 */
    withdrawal() {
      const token = localStorage.getItem('token')
      this.form.token = token
      withdrawalApi(this.form).then(res => {
        console.log(res);
         if(res.code===1){
          this.$message.success(res.msg)
         }
         if(res.code===0){
          this.$message.error(res.msg)
         }
       // this.$message(res.msg)
      })
    },
    /* 获取配置 */
    getSetting() {
      settingApi().then(res => {
        this.setting = res.data.withdrawal_p
        console.log(this.setting, '获取的配置')
      })
    },
   

  },
  mounted() {
    this.getWallet()
    this.getSetting()
  },
  components: {}
}
</script>
  
<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.4);
  /* lightgray, but transparent */

}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
  background-color: white;
  //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}

.box1:hover {
  cursor: pointer
}

.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //gap: 10px;

  color: white;
}

.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
    // background-color: pink;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  /*   .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    } */

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

:deep(.el-input__wrapper) {
  background-color: black ! important;
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #fff !important;
}
</style>
  